<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>机构管理</title>
	<link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
	<link rel="stylesheet" href="../../lib/vxe-table/index.css">
	<link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
	<link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="../../lib/layer/theme/default/layer.css">
	<link rel="stylesheet" href="../../static/css/skins.css">
	<script type="text/javascript" src="../../lib/vue/vue.js"></script>
	<script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
	<script type="text/javascript" src="../../lib/element-ui/index.js"></script>
	<script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
	<script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
	<script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
	<script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
	<script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
	<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
	<script type="text/javascript" src="../../lib/layer/layer.min.js"></script>
	<script type="text/javascript" src="../../static/js/webApi.js"></script>
	<script type="text/javascript" src="../../static/js/tool.js"></script>
	<style type="text/css">
		/*
            找到html标签、body标签，和挂载的标签
            都给他们统一设置样式
        */
		html,
		body,
		#app,
		.el-container {
			/*设置内部填充为0，几个布局元素之间没有间距*/
			padding: 0px;
			/*外部间距也是如此设置*/
			margin: 0px;
			/*统一设置高度为100%*/
			height: 100%;
			width: 100%;
		}
		.el-main {
			padding: 4px;
		}
		.el-cascader-menu__wrap {
			min-height: 350px
		}
		.el-icon-search{
			color: #409EFF;
		}
		.el-icon-refresh-right{
			color: #409EFF;
		}
		[v-cloak] {
			display: none;
		}
	</style>
</head>

<body class="skin-blue">
	<el-container id="app" v-cloak>
		<el-main>
			<el-form :inline="true" :model="queryData" ref="queryData" label-width="80px" label-position="right" size="mini"
				style="height: 35px;" @submit.native.prevent>
				<el-form-item label="机构名称">
					<el-input v-model="queryData.keyword" placeholder="请输入关键字"></el-input>
				</el-form-item>
				<el-form-item>
				    <el-button size="mini" icon="el-icon-search" @click="searchEvent">查询</el-button>
				    <el-button size="mini" icon="el-icon-refresh-right" @click="searchEventA">重置</el-button>
				</el-form-item>
			</el-form>

			<vxe-grid border ref="xTree" resizable show-overflow highlight-current-row="true" keep-source
				:pager-config="tablePage" @page-change="handlePageChange" :height="tableHeight" size="mini" row-id="orgCode"
				:checkbox-config="tableRadio" :toolbar="tableToolbar" :export-config="tableExport" :loading="dataLoading"
				@cell-dblclick="cellDBLClickEvent" :edit-config="{trigger:'click', mode:'row'}"
				:header-cell-style="{'text-align':'center'}" @toolbar-button-click="toolbarButtonClickEvent" :data="tableData">
				<vxe-table-column type="checkbox" width="60" align="center"></vxe-table-column>
				<vxe-table-column field="departId" title="机构编码" width="180" align="center" :visible="visible">
				</vxe-table-column>
				<vxe-table-column field="departName" title="机构名称" width="250" align="left">
				</vxe-table-column>
				<vxe-table-column field="parentDepartName" title="上级机构名称" width="250" align="left">
				</vxe-table-column>
				<vxe-table-column field="departDsc" title="备注" align="left">
				</vxe-table-column>
				<vxe-table-column field="orderId" title="排序" width="100" align="right">
				</vxe-table-column>
				<vxe-table-column field="createUser" title="创建人" width="130" align="left">
				</vxe-table-column>
				<vxe-table-column field="createTime" title="创建日期" width="150" align="right" :formatter="formatDate">
				</vxe-table-column>
				<vxe-table-column field="departId" title="机构ID" width="180" align="center" :visible="visible">
				</vxe-table-column>
				<vxe-table-column field="parentDepartId" title="上级机构ID" width="180" align="center" :visible="visible">
				</vxe-table-column>
			</vxe-grid>

			<vxe-modal ref="xModal" v-model="showEdit" :title="selectRow ? '编辑&保存' :'新增&保存'" width="800"
				:loading="submitLoading" resize destroy-on-close>
				<el-form :model="formData" :rules="formRules" ref="formData" label-width="100px" label-position="right"
					size="mini">
					<template v-if="visible===true">
						<el-form-item label="机构ID" prop="id">
							<el-input v-model="formData.departId"></el-input>
						</el-form-item>
					</template>
					<el-row>
						<el-col>
							<el-form-item label="父级机构" prop="parentDepartId">
								<el-cascader v-model="formData.parentDepartId" :options="orgOptions" :disabled="visiable"
									:props="{ expandTrigger: 'hover',checkStrictly:true,multiple:false,emitPath:false }" clearable
									filterable style="width:99%">
								</el-cascader>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col span="12">
							<el-form-item label="机构名称" prop="departName">
								<el-input v-model="formData.departName" step="5" placeholder="请输入机构名称" style="width:100%">
									</el-input-number>
							</el-form-item>
						</el-col>
						<el-col span="12">
							<el-form-item label="排序号" prop="orderId">
								<el-input-number v-model="formData.orderId" step="1" placeholder="请输入排序号" style="width:100%">
								</el-input-number>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col>
							<el-form-item label="备注" prop="departDsc">
								<el-input type="textarea" v-model="formData.departDsc" :autosize="{ minRows: 2, maxRows: 4}"
									placeholder="请输入备注" maxlength="200" show-word-limit></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item style="height:auto;padding:4px 20px;text-align: right;">
						<el-button type="primary" icon="el-icon-folder" @click="submitEvent('formData')" :disabled="disabled"
							v-cloak>保存
						</el-button>
						<el-button type="warning" icon="el-icon-refresh" @click="resetEvent('formData')" v-cloak>重置
						</el-button>
						<el-button type="warning" icon="el-icon-switch-button" @click="closeEvent('formData')" v-cloak>退出
						</el-button>
					</el-form-item>
				</el-form>
			</vxe-modal>
		</el-main>
	</el-container>
</body>
<script type="text/javascript">
	var vue = null;
	window.onload = function () {
		var main = {
			data() {
				return {
					dataLoading: false,
					gridData: [],
					tablePage: {
						perfect: true,
						total: 0,
						currentPage: 1,
						pageSize: 30,
						align: 'left',
						pageSizes: [30, 50, 100, 200],
						layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump',
							'Total'
						],
					},
					show: false,
					dialogVisible: false,
					loading: false,
					disabled: false,
					disable: false,
					visible: false,
					visiable: false,
					tableHeight: '100%',
					//TEMplate: "",
					tableData: [],
					orgOptions: [],
					tableTreeConfig: {
						children: 'children',
						accordion: false, // 一层只允许展开一个节点
						expandAll: true, // 默认是否全部展开
						line: false,
						iconOpen: 'fa fa-minus-circle',
						iconClose: 'fa fa-plus-circle'
					},
					tableToolbar: {
						id: 'toolbar',
						size: 'mini',
						perfect: true,
						buttons: [{
							code: 'btnInsert',
							name: '新增机构',
							status: 'perfect',
							icon: 'fa fa-plus vxe-primary-color'
						}]
					},
					tableExport: {
						name: 'export',
						sheetName: 'Sheet1',
						type: 'xlsx',
						// 自定义类型
						types: ['xlsx', 'csv', 'html', 'xml', 'txt']
					},
					tableRadio: {
						trigger: 'row',
						highlight: true
					},
					submitLoading: false,
					selectRow: "",
					showEdit: false,
					queryData: {
						keyword: ""
					},
					formData: {
						departId: "",
						departName: "",
						parentDepartId: '',
						departDsc: "",
						orderId: ""
					},
					formRules: {
						departName: [{
								required: true,
								message: '请输入机构名称'
							},
							{
								min: 1,
								max: 50,
								message: '长度在1到50个字符'
							}
						],
						parentDepartId: [{
							required: true,
							message: '请选择父级机构'
						}]
					}
				}
			},
			created() {
				this.findList();
				this.getBtn();
			},
			mounted() {
				this.tableHeight = window.innerHeight - this.$refs.xTree.$el.offsetTop - 5;
			},
			methods: {
				searchEvent() {
						this.findList();
				},
				searchEventA() {
						this.queryData.keyword = "";
						this.findList();
				},
				getTreeData(data) {
					for (let i = 0; i < data.length; i++) {
						if (data[i].children.length < 1) {
							// children若为空数组，则将children设为undefined
							data[i].children = undefined;
						} else {
							// children若不为空数组，则继续 递归调用 本方法
							this.getTreeData(data[i].children);
						}
					}
					return data;
				},
				getBtn() {
					this.tableToolbar.buttons = []
					let bts = Tool.getButton()
					let btns = []
					this.tableToolbar.buttons = btns.concat(bts)
				},
				//分页
				handlePageChange({
					currentPage,
					pageSize
				}) {
					this.tablePage.currentPage = currentPage
					this.tablePage.pageSize = pageSize
					this.findList()
				},
				findList() {
					this.dataLoading = true
					let queryParams = Object.assign({
						keyword: this.queryData.keyword,
						page: this.tablePage.currentPage,
						rows: this.tablePage.pageSize
					});
					var that = this;
					webApi("/org/getOrgList", "post", queryParams, function (data) {
						that.tableData = data.data.rows;
						that.tablePage.total = data.data.total
						that.getOrgOptions();
						that.dataLoading = false;
					}, function () {
						that.tableData = [];
						that.tablePage.total = 0
						that.getOrgOptions();
						that.dataLoading = false;
					});
				},
				getOrgOptions() {
					let that = this;
					webApi('/org/getOrgOptions', 'post', {}, function (data) {
						if (data.code == 200) {
							that.orgOptions = that.getTreeData(data.data);
						} else {
							that.$message({
								message: data.msg,
								type: 'error',
								center: true
							});
						}
					}, function () {})
				},
				searchEvent(formName, acType) {
					if (acType == 0) {
						this.queryData = {
							keyword: ""
						}
					}
					this.tablePage.currentPage = 1
					this.findList();
				},
				formatDate({
					cellValue
				}) {
                    return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')
				},
				formatIcon({
					cellValue
				}) {
					return `<i class="${cellValue} fa-lg"></i>`;
				},
				formatOrgType({
					cellValue
				}) {
					let item = this.orgTypeOptions.find(item => item.value === cellValue)
					return item ? item.label : '';
				},
				toolbarButtonClickEvent({
					code
				}, event) {
					switch (code) {
						case 'reset':
							this.searchEvent(this.queryData, 0)
							break;
						case 'search':
							this.searchEvent(this.queryData, 1)
							break;
						case 'btnInsert':
							var row = this.$refs.xTree.getCheckboxRecords();
							if (row) {
								var parentCode = row.parentMenuId;
							} else {
								var parentCode = "";
							}
							this.insertEvent(parentCode);
							break;
						case 'btnUpdate':
							if (this.$refs.xTree.getCheckboxRecords().length == 1) {
								let row = this.$refs.xTree.getCheckboxRecords()
								this.editEvent(row[0]);
							} else if (this.$refs.xTree.getCheckboxRecords().length > 1) {
								this.$message({
									message: "数据大于一条，无法修改",
									type: 'warning',
									center: true
								});
							} else {
								this.$message({
									message: "请选择一行数据",
									type: 'warning',
									center: true
								});
							}
							break;
						case 'btnDelete':
							var row = this.$refs.xTree.getCheckboxRecords();
							console.log(row)
							if (row.length > 0) {
								this.removeEvent(row);
							} else {
								this.$message({
									message: "请选择需要删除的数据行",
									type: 'warning',
									center: true
								});
							}
							break;
						case 'btnExport':
							this.$refs.xTree.exportData({
								filename: '菜单列表',
								sheetName: 'Sheet1',
								type: 'xlsx'
							});
							break;
					}
				},
				insertEvent(parentCode) {
					this.disable = false;
					this.visiable = false;
					this.formData = {
						departId: "",
						departName: "",
						parentDepartId: "",
						departDsc: "",
						orderId: ""
					};
					this.selectRow = "";
					this.showEdit = true;
				},
				submitEvent(formName) {
					this.$refs[formName].validate((valid) => {
						if (valid) {
							this.submitLoading = true;
							this.disabled = true;
							let params = Object.assign(this.formData);
							let that = this
							webApi('/org/save', 'post', params, function (data) {
								if (data.code == 200) {
									that.findList();
									that.$message({
										message: data.msg,
										type: 'success',
										center: true
									});
									that.showEdit = false;
								} else {
									that.$message({
										message: data.msg,
										type: 'error',
										center: true
									});
								}
								that.disabled = false;
							}, function () {})
							this.$refs.xTree.setAllTreeExpansion(true);
							this.submitLoading = false;

						} else {
							return false;
						}
					});

				},
				resetEvent(formName) {
					this.disable = false;
					this.visiable = false;
					this.formData = {
						departId: "",
						departName: "",
						parentDepartId: "",
						orderId: "",
						departDsc: ""
					};
					this.selectRow = "";
				},
				closeEvent(formName) {
					this.showEdit = false;
				},
				editEvent(row) {
					this.formData = {
						departId: row.departId,
						departName: row.departName,
						parentDepartId: row.parentDepartId,
						orderId: row.orderId,
						departDsc: row.departDsc == null ? "" : row.departDsc
					};
					this.disable = true;
					let that = this
					that.selectRow = row;
					that.showEdit = true;
				},
				removeEvent(row) {
					this.$XModal.confirm('您确定要删除该数据?(删除后可能会影响部分用户数据权限)').then(type => {
						if (type === 'confirm') {
							this.submitLoading = true;
							let ids = ""
							row.forEach(item => {
								ids += item.departId + ","
							});
							let params = Object.assign({
								departId: ids
							});
							let that = this
							webApi('/org/delete', 'post', params, function (data) {
								if (data.code == 200) {
									that.findList();
									that.$message({
										message: data.msg,
										type: 'success',
										center: true
									});
									that.showEdit = false;
								} else {
									that.$message({
										message: data.msg,
										type: 'error',
										center: true
									});
								}
							})
							this.submitLoading = false;
						}
					});
				},
				cellDBLClickEvent({
					row,
					rowIndex,
					$rowIndex,
					column,
					columnIndex,
					$columnIndex,
					$event
				}) {
					if (columnIndex > 1) {
						this.editEvent(row);
					}
				},
				checkColumnMethod({
					column
				}) {
					if (['orgCode', 'orgName'].includes(column.property)) {
						return false
					}
					return true
				},
				query() {},
			}
		};
		var vue = Vue.extend(main);
		new vue().$mount('#app');
	}
</script>

</html>